<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>

<ui:composition template="/templates/Plantilla.xhtml">
	
	<ui:define name="content">			
		<h:form class="form">
		<p:growl id="growl1" />
		<p:messages id="messages" closable="true"/>
		<h3 style="text-align: center; padding-bottom:35px;"> Alta de Sujetos Residenciales</h3>
		<h4 style="text-align: right;"> Paso 1 de 3</h4>
		
			<p:panelGrid columns="1" style="width:100%;"  >
				<f:facet name="header"> Datos del Sujeto</f:facet>
			</p:panelGrid>
			<p:panel>
			<br/>
			<h:panelGrid columns="3">  
				<h:outputText for="lblNombre" value="Nombre: *" style="font-weight: bold;"/>
				<h:panelGroup>
					<p:inputText id="lblNombre" value="#{sujetoResidencialCreate2.sucursal.nombre}" label="Nombre" autocomplete="off"
					onkeyup="javascript:this.value=this.value.toUpperCase();">
						<p:ajax update="errorlblNombre, cmdSiguiente" event="keyup"  listener="#{sujetoResidencialCreate2.listenerNombre}"/>
					</p:inputText>
		  		</h:panelGroup>
		  		<p:messages id="errorlblNombre" ></p:messages>
		  		
		  		<h:outputText for="lblApellido" value="Apellido: *" style="font-weight: bold;"></h:outputText>
				<h:panelGroup>
					<p:inputText id="lblApellido" value="#{sujetoResidencialCreate2.sucursal.apellido}" label="Apellido" autocomplete="off"
					onkeyup="javascript:this.value=this.value.toUpperCase();">
						<p:ajax update="errorlblApellido, cmdSiguiente" event="keyup"  listener="#{sujetoResidencialCreate2.listenerApellido}"/>
					</p:inputText>
				</h:panelGroup>
        		<p:messages id="errorlblApellido" ></p:messages>
				
				<h:outputText for="lblApodo" value="Apodo/Alias:" />
				<p:inputText id="lblApodo" value="#{sujetoResidencialCreate2.sucursal.alias}" autocomplete="off" 
				onkeyup="javascript:this.value=this.value.toUpperCase();"/>
               	<p:messages id="errorlblApodo" ></p:messages>
			</h:panelGrid> 
			<br/>	
		</p:panel>
		<p:panelGrid columns="1" style="width:100%;"  >
			<f:facet name="header"> Tipo de Cliente</f:facet>
		</p:panelGrid>
		<p:panel>
			<br/>
			<h:panelGrid columns="3" >
				<h:outputText id="lblTipoCliente" value="Tipo de Cliente: *" style="font-weight: bold;"/>
				<p:selectOneMenu value="#{sujetoResidencialCreate2.sujeto.tipoCliente.tipoClienteId}" effect="fade" required="true" label="Tipo de Cliente">  
			    	<f:selectItem itemLabel="Seleccione un tipo de Cliente..." itemValue="0" />  
			        <f:selectItems value="#{selectOneMany.tiposDeClientes()}" var="tipoCliente"
							itemLabel="#{tipoCliente.nombre}" 
							itemValue="#{tipoCliente.tipoClienteId}">
					</f:selectItems>
					<p:ajax update="errorlblTipoCliente, cmdSiguiente" event="change" listener="#{sujetoResidencialCreate2.listenerTipoCliente}" />  
			    </p:selectOneMenu>
			    <p:messages id="errorlblTipoCliente" ></p:messages>
			</h:panelGrid>
			
			<br/>
		</p:panel>	
		<p:panelGrid columns="1" style="width:100%;"  >
			<f:facet name="header"> Datos del Domicilio</f:facet>
		</p:panelGrid>
		<p:panel>
			<br/>
			<h:panelGrid columns="3">    
	
	     		<h:outputText for="lblBarrio" value="Barrio: *" style="font-weight: bold;" />
	     		<h:panelGroup>   	
		  			<p:inputText id="lblBarrio" value = "#{sujetoResidencialCreate2.sucursal.barrio}" label="Barrio" autocomplete="off"
		  			onkeyup="javascript:this.value=this.value.toUpperCase();">
		  				<p:ajax update="errorlblBarrio, cmdSiguiente" event="keyup"  listener="#{sujetoResidencialCreate2.listenerBarrio}"/>
		  			</p:inputText>
	  			</h:panelGroup>      	
				<p:messages id="errorlblBarrio" ></p:messages>
				
	        	<h:outputText for="lblCalle" value="Calle: *" style="font-weight: bold;"/>
	        	<h:panelGroup>
		        	<p:inputText id="lblCalle" value="#{sujetoResidencialCreate2.sucursal.calle}" label="Calle"  autocomplete="off"
		        	onkeyup="javascript:this.value=this.value.toUpperCase();">
		        		<p:ajax update="errorlblCalle, cmdSiguiente" event="keyup"  listener="#{sujetoResidencialCreate2.listenerCalle}"/>
		        	</p:inputText>
		        </h:panelGroup>
				<p:messages id="errorlblCalle" ></p:messages>
	
	        	<h:outputText for="lblNumero" value="Numero: *" style="font-weight: bold;"/>
	        	<h:panelGroup>
		        	<p:inputText id="lblNumero" value="#{sujetoResidencialCreate2.numero}" label="Numero" autocomplete="off"
		        	onkeyup="javascript:this.value=this.value.toUpperCase();">
		        		<p:ajax update="errorlblNumero, cmdSiguiente" event="keyup"  listener="#{sujetoResidencialCreate2.listenerNumero}"/>
		        	</p:inputText>
		        </h:panelGroup>
	      		<p:messages id="errorlblNumero" ></p:messages>
			</h:panelGrid>
			<br/>

			<h:panelGrid columns="4" style="width:100%;" columnClasses="column1,column1-1, column1, column1-1">
			        	
	        	<h:outputText id="lblPiso" value="Piso:"/>			        
	        	<p:inputText id="inputPiso" value = "#{sujetoResidencialCreate2.sucursal.piso}" onkeyup="javascript:this.value=this.value.toUpperCase();"/>
	  
	        	<h:outputText id="lblDpto" value="Dpto:"/>
	        	<p:inputText id="inputDpto" value = "#{sujetoResidencialCreate2.sucursal.departamento}" onkeyup="javascript:this.value=this.value.toUpperCase();"/>
	      
	        	<h:outputText id="lblMza" value="Mza:"/>
	        	<p:inputText id="inputMza" value = "#{sujetoResidencialCreate2.sucursal.manzana}" onkeyup="javascript:this.value=this.value.toUpperCase();"/>	
	
	        	<h:outputText id="lblLte" value="Lote:"/>
	        	<p:inputText id="inputLte" value = "#{sujetoResidencialCreate2.sucursal.lote}" onkeyup="javascript:this.value=this.value.toUpperCase();"/>
			  	
			</h:panelGrid>
			<br/>
			<h:panelGrid columns="2" style="width:100%;" columnClasses="column1,column2-2">
					<h:outputText id="lblObservacion" value="Observacion:"/> 
					 <p:inputTextarea id="inputObservacion" value = "#{sujetoResidencialCreate2.sucursal.observacion}"  rows="2" cols="60" onkeyup="javascript:this.value=this.value.toUpperCase();"/>
			</h:panelGrid>	
			<br/>
		</p:panel>
			
		<p:panelGrid columns="1" style="width:100%;"  >
			<f:facet name="header"> Datos de Contacto</f:facet>
		</p:panelGrid>
		<p:panel>	
			<br/>
			<h:panelGrid columns="2">  	
	        	<h:outputText value="Telefono: *" style="font-weight: bold;"/>
	        	<p:inputText value="#{sujetoResidencialCreate2.sucursal.telefonoFijo}"	 autocomplete="off" />
	    
	        	<h:outputText value="Interno: " />
	        	<p:inputText value="#{sujetoResidencialCreate2.sucursal.interno}"  autocomplete="off"/>
	 
	        	<h:outputText value="Celular: " />
	        	<p:inputText value="#{sujetoResidencialCreate2.sucursal.telefonoMovil}"  autocomplete="off"/>
	 
	        	<h:outputText value="Correo Electronico:"/>
	        	<p:inputText id="inputPiso2" value = "#{sujetoResidencialCreate2.sucursal.email}"  autocomplete="off"/>
			</h:panelGrid>	
		</p:panel>
			<p:panel style = "text-align:center">
				<p:commandButton value="Cancelar" action="#{sujetoResidencialCreate2.cancelarAlta}"/>
				<p:commandButton id="cmdSiguiente" value="Siguiente" action="#{sujetoResidencialCreate2.cargarVisita(sujetoResidencialCreate2.sujeto)}" 
				 		update="growl1" disabled="#{sujetoResidencialCreate2.deshabilitarGuardar}" ajax="false"/>
			</p:panel>    
	</h:form>        	        	        	        
	</ui:define>
</ui:composition>
</h:body>
</html>